<template>
  <div class="shop-appraise">
    <scroll class="content" ref="scroll" :pull-up-load="true" @pullingUp="pullingUp">
    <shop-appraise-header :scores="scores" />
    <shop-appraise-main :tags="tags" :rating="rating" />
    </scroll />
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import ShopAppraiseHeader from "./childComps/ShopAppraiseHeader";
import ShopAppraiseMain from "./childComps/ShopAppraiseMain";

import { getScores, getTags, getRating } from "network/shop";

export default {
  data() {
    return {
      scores: {},
      tags: [],
      rating: [],
      isTop: false,
      id: "",
      limit: 10,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getScores(this.id);
    this.getTags(this.id);
  },
  mounted() {
    this.getRating(this.id, true, 0, this.limit);

    this.$bus.$on("handleAppraiseTagBtn", (name) => {
      console.log(name);
      this.getRating(this.id, true, 0, this.limit, name);
    });
  },
  methods: {
    getScores(id) {
      getScores(id).then((res) => {
        this.scores = res;
      });
    },
    getTags(id) {
      getTags(id).then((res) => {
        this.tags = res;
      });
    },
    getRating(id, has_content, offset, limit,name) {
      getRating(id, has_content, offset, limit,name).then((res) => {
        this.rating.push(...res);
      });
      this.$refs.scroll.refresh();
      this.$refs.scroll.finishPullUp();
    },

    pullingUp() {
      this.limit += 10;
      this.getRating(this.id, true, 0, this.limit);
    },
  },
  components: {
    Scroll,
    ShopAppraiseHeader,
    ShopAppraiseMain,
  },
};
</script>
<style lang="less" scoped>
.shop-appraise {
  position: relative;
  width: 100%;
  background-color: #fff;
  z-index: 9;
  .content {
    height: 100%;
  }
}
</style>